import './index.css'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import gsap from 'gsap'




/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}



/**
 * Scene
 */
const scene = new THREE.Scene()


/**
 * Camera
 */
const cameraGroup = new THREE.Group()
scene.add(cameraGroup)
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.z = 6

cameraGroup.add(camera)

/**
 * parameters
 */
const parameters = {
    materialColor: '#FFFFFF',

}


/**
 * texture
 */
// const textureLoader = new THREE.TextureLoader()
// const gradientTexture = textureLoader.load('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a9dbb4287414cf99f3c5ecae9864914~tplv-k3u1fbpfcp-zoom-1.image')
// gradientTexture.magFilter = THREE.NearestFilter

/**
 * Matetrial
 */
const material = new THREE.MeshToonMaterial({
    color: parameters.materialColor,
})


/**
 * Mesh
 */
const objectDistance = 7
const mesh1 = new THREE.Mesh(new THREE.TorusGeometry(1, 0.4, 16, 60), material)
const mesh2 = new THREE.Mesh(new THREE.ConeGeometry(1, 2, 32), material)
const mesh3 = new THREE.Mesh(new THREE.TorusKnotGeometry(0.8, 0.35, 100, 16), material)
const sectionMeshes = [mesh1, mesh2, mesh3]
scene.add(mesh1, mesh2, mesh3)


/**
 * particle
 */
const particleGeomatry = new THREE.BufferGeometry()
const particleMaterial = new THREE.PointsMaterial({
    color: new THREE.Color('#fff'),
    size: 0.02,
    sizeAttenuation: true
})
let count = 2000
const positions = new Float32Array(count * 3);
for (let i = 0; i < count * 3; i++) {
    const i3 = i * 3
    positions[i3 + 0] = (Math.random() - 0.5) * 10
    positions[i3 + 1] = objectDistance * 0.5 - (Math.random() * objectDistance * sectionMeshes.length)
    positions[i3 + 2] = (Math.random() - 0.5) * 10

}
particleGeomatry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
const particle = new THREE.Points(particleGeomatry, particleMaterial)
scene.add(particle)

/**
 * Light
 */
const ambientLight = new THREE.AmbientLight(new THREE.Color('#fff'), 0.28)
scene.add(ambientLight)
const directionalLight = new THREE.DirectionalLight(new THREE.Color('#ffffff'), 1)
directionalLight.position.set(1.5, 1, 1)
scene.add(directionalLight)

// const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight)
// scene.add(directionalLightHelper)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true, //透明
    antialias: true //抗锯齿
})
renderer.setSize(Size.width, Size.height)


/**
 * Debug ui
 */
const gui = new dat.GUI();
gui.addColor(parameters, 'materialColor').onChange(() => {
    material.color.set(parameters.materialColor)
})


/**
 * Mouse
 */
let mouse = {
    x: null,
    y: null
}
window.addEventListener('mousemove', (event) => {
    mouse.x = (event.clientX / Size.width) * 2 - 1
    mouse.y = (event.clientY / Size.height) * 2 - 1
})



/**
 * Scroll
 */
let scrollY = 0;
window.addEventListener('scroll', () => {
    scrollY = window.scrollY
})



/**
 * wheel 监听滚轮
 */
let currentSection = 0;
const sections = document.querySelectorAll('section');
const totalSections = sections.length;
window.addEventListener('wheel', (e) => {
    e.preventDefault(); // 阻止默认滚动

    // 判断滚动方向
    const delta = e.deltaY > 0 ? 1 : -1;
    // 计算目标 section
    currentSection = currentSection + delta;

    // 判断边界
    if (currentSection < 0) {
        currentSection = 0;
    }
    if (currentSection >= totalSections) {
        currentSection = totalSections - 1
    }

    // 滑动到目标位置
    window.scrollTo({
        top: sections[currentSection].offsetTop,
        behavior: 'smooth'
    })


    gsap.to(sectionMeshes[currentSection].rotation,{
        duration:1.5,
        ease:'power2.inOut',
        x:'+=6',
        y:'+=3'
    })
})


/**
 * Update
 */

const clock = new THREE.Clock()
const tick = () => {
    const elapsedTime = clock.getElapsedTime()
    // 旋转物体
    sectionMeshes.forEach((mesh, index) => {
        mesh.position.y = -objectDistance * index
        mesh.position.x = index % 2 === 0 ? 3 : -3
        mesh.rotation.set(mesh.rotation.x, mesh.rotation.y, 0)
    })
    // camera和cameraGroup两个坐标是独立的
    // 相机移动
    camera.position.y = -(scrollY / Size.height) * objectDistance
    // 鼠标事件
    // if (mouse.x && mouse.y) {
    //     cameraGroup.position.setX(mouse.x)
    //     cameraGroup.position.setY(mouse.y)
    // }
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()